import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
import { Dropdown } from "react-native-element-dropdown";
import totaldata from "@province-city-china/level";

const CitySelector = (props) => {
  const [provinceData, setProvinceData] = useState([]);
  const [cityData, setCityData] = useState([]);
  const [areaData, setAreaData] = useState([]);
  const [province, setProvince] = useState(props.provincekey);
  const [city, setCity] = useState(props.citykey);
  const [area, setArea] = useState(props.areakey);
  const [ispFocus, setIspFocus] = useState(false);
  const [iscFocus, setIscFocus] = useState(false);
  const [isaFocus, setIsaFocus] = useState(false);

  useEffect(() => {
    var count = Object.keys(totaldata).length;
    let provinceArray = [];
    for (var i = 0; i < count; i++) {
      provinceArray.push({
        value: totaldata[i].code,
        label: totaldata[i].name,
      });
    }
    setProvinceData(provinceArray);
    if (province == undefined || province === "") {
      console.log("无默认省");
    } else {
      handeleCity(province);
    }
    if (city == undefined || city === "") {
      console.log("无默认市");
    } else {
      handeleArea(province, city);
    }
  }, []);

  const handeleCity = (provinceCode) => {
    let cityArray = [];
    const currentProvince = totaldata.filter(
      (item) => item.code == provinceCode
    );
    var citycount = Object.keys(currentProvince[0].children).length;
    for (var j = 0; j < citycount; j++) {
      cityArray.push({
        value: currentProvince[0].children[j].code,
        label: currentProvince[0].children[j].name,
      });
    }
    setCityData(cityArray);
  };

  const handeleArea = (provinceCode, cityCode) => {
    let areaArray = [];
    const currentProvince = totaldata.filter(
      (item) => item.code == provinceCode
    );
    const currentCity = currentProvince[0].children.filter(
      (item) => item.code == cityCode
    );
    var areacount = currentCity[0].children
      ? Object.keys(currentCity[0].children).length
      : 0;
    if (areacount != 0) {
      for (var k = 0; k < areacount; k++) {
        areaArray.push({
          value: currentCity[0].children[k].code,
          label: currentCity[0].children[k].name,
        });
      }
    } else {
      areaArray.push({
        value: 0,
        label: "暂无数据",
      });
    }
    setAreaData(areaArray);
  };

  return (
    <View
      style={{
        backgroundColor: "#fff",
        borderRadius: 15,
        marginTop: 10,
      }}
    >
      <View style={styles.option}>
        <Text style={{ fontSize: 16 }}>省份:</Text>
        <Dropdown
          style={[styles.dropdown, ispFocus && { borderColor: "#FBB764" }]}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          containerStyle={{ marginTop: -10 }}
          data={provinceData}
          search
          maxHeight={300}
          labelField="label"
          valueField="value"
          placeholder={!ispFocus ? "请选择省" : "..."}
          searchPlaceholder="Search..."
          value={province}
          onFocus={() => setIspFocus(true)}
          onBlur={() => setIspFocus(false)}
          onChange={(item) => {
            setProvince(item.value);
            handeleCity(item.value);
            setArea(null);
            setIspFocus(false);
            props.handleProvince(item.value, item.label);
          }}
        />
      </View>

      <View style={styles.option}>
        <Text style={{ fontSize: 16 }}>城市:</Text>
        <Dropdown
          style={[styles.dropdown, iscFocus && { borderColor: "#FBB764" }]}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          containerStyle={{ marginTop: -10 }}
          data={cityData}
          search
          maxHeight={300}
          labelField="label"
          valueField="value"
          placeholder={!iscFocus ? "请选择市" : "..."}
          searchPlaceholder="Search..."
          value={city}
          onFocus={() => setIscFocus(true)}
          onBlur={() => setIscFocus(false)}
          onChange={(item) => {
            setCity(item.value);
            handeleArea(province, item.value);
            setIscFocus(false);
            props.handleCity(item.value, item.label);
          }}
        />
      </View>

      <View style={styles.option}>
        <Text style={{ fontSize: 16 }}>区县:</Text>
        <Dropdown
          style={[styles.dropdown, isaFocus && { borderColor: "#FBB764" }]}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          containerStyle={{ marginTop: -10 }}
          data={areaData}
          search
          maxHeight={300}
          labelField="label"
          valueField="value"
          placeholder={!isaFocus ? "请选择区县" : "..."}
          searchPlaceholder="Search..."
          value={area}
          onFocus={() => setIsaFocus(true)}
          onBlur={() => setIsaFocus(false)}
          onChange={(item) => {
            setArea(item.value);
            setIsaFocus(false);
            props.handleArea(item.value, item.label);
          }}
        />
      </View>
    </View>
  );
};

export default CitySelector;

const styles = StyleSheet.create({
  dropdown: {
    borderColor: "#ccc",
    borderWidth: 0.5,
    borderRadius: 2,
    paddingHorizontal: 10,
    marginLeft: 10,
    padding: 5,
    // marginBottom: 10,
    flex: 1,
  },
  icon: {
    marginRight: 5,
  },
  label: {
    position: "absolute",
    backgroundColor: "white",
    left: 22,
    top: 8,
    zIndex: 999,
    paddingHorizontal: 8,
    fontSize: 14,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
  subtitle: {
    fontSize: 16,
  },
  option: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 10,
  },
});
